<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img-box,
        .sl {
            width: 400px;
        }
    </style>
</head>

<body>
    <div class="box" id="box">我是box</div>
    <img src="../day01/images/on.png" alt="这里有一个图片" id="light" style="width: 200px;height: 300px;">
    <br />
    <!-- <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div> -->
    <img src="./images/1.png" alt="" class="img-box">
    <br />
    <input type="checkbox" name="all" onclick="checkAll()"> 全选
    <input type="checkbox" name="hobby">唱歌
    <input type="checkbox" name="hobby">跳舞
    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">rap
    <input type="radio" name="gender">
    <input type="radio" name="gender">
    <!-- 绑定事件 onclick="on()" -->
    <!-- 当button被点击 执行函数on -->
    <button type="button" onclick="on()">点一下，有神奇的事情</button>
    <button id="btn">我是一个神奇的按钮</button>
    <!-- onfous 光标选中 触发该事件 -->
    <!-- onblus 失去焦点触发该事件 数据合法性的校验 -->
    <input type="text" name="username" placeholder="请输入用户名..." onblur="changeDefault()" onfocus="changeBack()">
    <span id="msg"></span>
    <br />
    <img src="./images/神里.png" alt="" class="sl">
    <!-- 内部脚本 -->
    <script>

        // let items = document.querySelectorAll(".item")
        // setTimeout(() => {
        //     for (let i = 0; i < items.length; i++) {
        //         items[i].innerText = "呵呵"
        //     }
        // },3000)
        // let images = ['神里', "神子", "宵宫", "绫人", "万叶"]
        // let img = document.querySelector('.img-box');
        // let count = 0;
        // img.src = './images/' + images[count] + ".png"
        // setInterval(() => {
        //     count++;
        //     if (count > 4) {
        //         count = 0;
        //     }
        //     img.src = "./images/" + images[count] + ".png";
        // }, 2000)

        let checkboxes = document.querySelectorAll("[name='hobby']")
        let all = document.querySelector('[name="all"]')
        let checkAll = () => {
            for (let i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = all.checked
            }
        }
        console.log(checkboxes);

        if (all.checked) {
            for (let i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = true
            }
        }

    </script>
    <!-- 外部脚本 -->
    <script src="./js/element.js">
        // 内部不能出现内容
    </script>
</body>

</html>